<template>
	<view class="avatar-popup">
		<u-popup
			v-model="show"
			mode="center"
      :closeable="true"
      close-icon-color="#fff"
			border-radius="16"
			width="520"
			@close="close">
			<view class="popup-content1">
				<view v-if="appletInfo && appletInfo.video_ad" class="tips">{{ tipContent }}</view>
				<view v-else class="tips">下载超清无水印原图</view>
				<view class="button-content">
					<u-button
            class="btn"
            @click="handleDownload"
						:custom-style="{
							'background': '#fff',
							'color': '#56d39d',
							'height': '68rpx',
							'font-size': '28rpx',
							'border-radius': '16rpx',
							'border': 'none'
						}">
            <text v-if="appletInfo && appletInfo.video_ad">{{ btnText }}</text>
            <text v-else>下载</text>
          </u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { checkingDownloadStatus } from '@/api/applet'
  import { mapGetters } from 'vuex'
	export default{
		props: {
			'popupShow': {
				default: false,
			},
			'tipContent': {
				type: String,
				default: '看广告自动下载超清无水印原图'
			},
			'btnText': {
				type: String,
				default: '看广告下载'
			}
		},
		data(){
			return{
				show: this.popupShow,
				downloadCount: 0,
			}
		},
    computed: {
			...mapGetters([
				'appletInfo'
			])
		},
		watch: {
			popupShow: {
				immediate: true,
				handler(val, oldValue) {
					this.show = val;
					if (val) {
						this.getCheckingDownloadStatus();
					}
				}
			}
		},
		methods: {
			close(){
				this.$emit('close', false);
			},
      handleDownload() {
				if (this.downloadCount > 0) {
					this.$emit('handleDownload', '');
				} else {
					uni.showToast({
						title: '超过最大限制下载次数',
						icon: 'none'
					})
				}
      },

			// 校验状态
			getCheckingDownloadStatus() {
				checkingDownloadStatus().then(result => {
					if (result && result.data > 0) {
						this.downloadCount = result.data;
					} else {
						this.downloadCount = 0;
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup-content1{
		padding: 100rpx 36rpx 36rpx 36rpx;
		background-color: $uni-color-primary;
		color: #fff;
    position: relative;
    text-align: center;

    .button-content{
      padding: 0 24rpx;
      margin-bottom: 24rpx;
    }

    .btn{
      ::before{
        display: none;
      }
      ::after{
        display: none;
      }
    }

		.tips{
			font-size: 32rpx;
			margin-bottom: 48rpx;
		}
	}
</style>
